// prettyLog.ts

export const prettyLog = () => {
    const isProduction = import.meta.env.MODE === 'production';

    const isEmpty = (value: any) => {
        return value == null || value === undefined || value === '';
    };

    const prettyPrint = (title: string, text: string, color: string) => {
        if (isProduction) return;
        console.log(
            `%c ${title} %c ${text} %c`,
            `background:${color};border:1px solid ${color}; padding: 2px; border-radius: 5px; color: white; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.2);`,
            `border:1px solid ${color}; padding: 2px; border-radius: 5px; color: ${color}; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.2);`,
            'background:transparent'
        );
    };

    const info = (textOrTitle: string, content = '') => {
        const title = isEmpty(content) ? 'Info' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#409EFF');
    };

    const error = (textOrTitle: string, content = '') => {
        const title = isEmpty(content) ? 'Error' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#F56C6C');
    };

    const warning = (textOrTitle: string, content = '') => {
        const title = isEmpty(content) ? 'Warning' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#E6A23C');
    };

    const success = (textOrTitle: string, content = '') => {
        const title = isEmpty(content) ? 'Success' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#67C23A');
    };

    const table = (data: any[]) => {
        if (isProduction) return;

        // Calculate column widths dynamically
        const headers = Object.keys(data[0]);
        const columnWidths: number[] = headers.map(header => Math.max(header.length, ...data.map(row => String(row[header]).length)));
        
        // Output table header with aligned padding and styling
        const headerString = headers.map((header, index) => pad(header, columnWidths[index])).join(' | ');
        const headerSeparator = headers.map((header, index) => '-'.repeat(columnWidths[index])).join('-+-');
        console.log(`%c${headerString}`, 'color: #fff; background-color: #409EFF; font-weight: bold; padding: 2px; border-radius: 4px;');
       // console.log(`%c${headerSeparator}`, 'color: #409EFF; background-color: #f0f0f0;font-weight: bold; padding: 2px; border-radius: 0px;');

        // Output table rows with aligned padding
        data.forEach(row => {
            const rowValues = headers.map((header, index) => pad(String(row[header]), columnWidths[index])).join(' | ');
            console.log(`%c${rowValues}`, 'color: #c0c0c0; font-weight: bold; padding: 2px; border-radius: 0px;');

        });
    };

    const pad = (str: string, length: number) => {
        const padLength = length - str.length;
        if (padLength <= 0) return str;
        const paddingLeft = Math.floor(padLength / 2);
        const paddingRight = Math.ceil(padLength / 2);
        return ' '.repeat(paddingLeft) + str + ' '.repeat(paddingRight);
    };
    const picture = (url: string, scale = 1) => {
        if (isProduction) return;
        const img = new Image();
        img.crossOrigin = 'anonymous';
        img.onload = () => {
            const c = document.createElement('canvas');
            const ctx = c.getContext('2d');
            if (ctx) {
                c.width = img.width;
                c.height = img.height;
                ctx.fillStyle = 'red';
                ctx.fillRect(0, 0, c.width, c.height);
                ctx.drawImage(img, 0, 0);
                const dataUri = c.toDataURL('image/png');

                console.log(
                    `%c sup?`,
                    `font-size: 1px;
                    padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
                    background-image: url(${dataUri});
                    background-repeat: no-repeat;
                    background-size: ${img.width * scale}px ${img.height * scale}px;
                    color: transparent;
                    `
                );
            }
        };
        img.src = url;
    };

    return {
        info,
        error,
        warning,
        success,
        table,
        picture
    };
};

export default prettyLog;
